<template>
    <div>
        <div class="dh" @click="tzback()"> <p class="head"> &lt; 电影演出</p></div>
        <div>
            <van-search
                    v-model="seamsg"
                    show-action
                    placeholder="请输入搜索关键词"
            />
        </div>
        <div>
            <van-swipe :autoplay="3000" lazy-render>
                <van-swipe-item  v-for="image in images" :key="image" >
                    <img class="img1" :src="image.img" />
                </van-swipe-item>
            </van-swipe>
        </div>
        <div>
            <van-image
                    width="100%"
                    height="100"
                    src="http://kqoss.oss-cn-beijing.aliyuncs.com/ct.png?Expires=1745393749&OSSAccessKeyId=LTAI5t6DuENqcjTYDCsppyGg&Signature=jDrnNvQojJi4ITImmFq5UUZmiQs%3D"
            />
        </div>
        <div class="a">
            <van-divider content-position="left">正在热映</van-divider>
            <van-grid :border="false" :column-num="5"  >
                <van-grid-item v-for="m in movie1" @click="tzdetail(m.id)">
                    <van-image :src="m.imgurl" />
                    <p>{{m.name}}</p>
                    <van-button color="#f03d38"  round type="primary" @click="tzpay()">购买</van-button>
                </van-grid-item>
<!--                <van-grid-item>-->
<!--                    <van-image :src="require('../assets/img/2.png')" />-->
<!--                    <p>精灵旅社...</p>-->
<!--                    <van-button color="#f03d38"  round type="primary">购买</van-button>-->
<!--                </van-grid-item>-->
<!--                <van-grid-item>-->
<!--                    <van-image :src="require('../assets/img/3.png')" />-->
<!--                    <p>边缘行者</p>-->
<!--                    <van-button color="#f03d38"  round type="primary">购买</van-button>-->
<!--                </van-grid-item>-->
<!--                <van-grid-item>-->
<!--                    <van-image :src="require('../assets/img/4.png')" />-->
<!--                    <p>这个杀手...</p>-->
<!--                    <van-button color="#f03d38"  round type="primary">购买</van-button>-->
<!--                </van-grid-item>-->
<!--                <van-grid-item>-->
<!--                    <van-image :src="require('../assets/img/5.png')" />-->
<!--                    <p>月球陨落</p>-->
<!--                    <van-button color="#f03d38"  round type="primary">购买</van-button>-->
<!--                </van-grid-item>-->
            </van-grid>
        </div>
        <div class="b">
            <van-tabs v-model:active="activeName">
                <van-tab title="待映推荐" name="a">
                    <van-grid :border="false" :column-num="5" >
                        <van-grid-item v-for="m in movie2" @click="tzdetail(m.id)" >
                            <van-image :src="m.imgurl" />
                            <p>{{m.name}}</p>
                            <van-button color="#faae00"  round type="primary" @click="tzpay()">想看</van-button>
                        </van-grid-item>
<!--                        <van-grid-item>-->
<!--                            <van-image :src="require('../assets/img/02.png')" />-->
<!--                            <p>遇见你</p>-->
<!--                            <van-button color="#faae00"  round type="primary">想看</van-button>-->
<!--                        </van-grid-item>-->
<!--                        <van-grid-item>-->
<!--                            <van-image :src="require('../assets/img/03.png')" />-->
<!--                            <p>保你平安</p>-->
<!--                            <van-button color="#faae00"  round type="primary">想看</van-button>-->
<!--                        </van-grid-item>-->
<!--                        <van-grid-item>-->
<!--                            <van-image :src="require('../assets/img/04.png')" />-->
<!--                            <p>我是真的...</p>-->
<!--                            <van-button color="#faae00"  round type="primary">想看</van-button>-->
<!--                        </van-grid-item>-->
<!--                        <van-grid-item>-->
<!--                            <van-image :src="require('../assets/img/05.png')" />-->
<!--                            <p>月球陨落</p>-->
<!--                            <van-button color="#faae00"  round type="primary">想看</van-button>-->
<!--                        </van-grid-item>-->
                    </van-grid>
                </van-tab>
                <van-tab title="即将上映" name="b">
                    <van-grid :border="false" :column-num="5">
                        <van-grid-item v-for="m in movie3" @click="tzdetail(m.id)">
                            <van-image :src="m.imgurl" />
                            <p>{{m.name}}</p>
                            <van-button color="#faae00"  round type="primary" @click="tzpay()">想看</van-button>
                        </van-grid-item>
<!--                        <van-grid-item>-->
<!--                            <van-image :src="require('../assets/img/07.png')" />-->
<!--                            <p>新秩序</p>-->
<!--                            <van-button color="#3c9ee5"  round type="primary">预售</van-button>-->
<!--                        </van-grid-item>-->
<!--                        <van-grid-item>-->
<!--                            <van-image :src="require('../assets/img/08.png')" />-->
<!--                            <p>暗恋.橘生...</p>-->
<!--                            <van-button color="#3c9ee5"  round type="primary">预售</van-button>-->
<!--                        </van-grid-item>-->
<!--                        <van-grid-item>-->
<!--                            <van-image :src="require('../assets/img/09.png')" />-->
<!--                            <p>断.桥 </p>-->
<!--                            <van-button color="#faae00"  round type="primary">想看</van-button>-->
<!--                        </van-grid-item>-->
<!--                        <van-grid-item>-->
<!--                            <van-image :src="require('../assets/img/010.png')" />-->
<!--                            <p>妈妈！</p>-->
<!--                            <van-button color="#faae00"  round type="primary">想看</van-button>-->
<!--                        </van-grid-item>-->
                    </van-grid>
                </van-tab>
            </van-tabs>
        </div>
    </div>
</template>

<script>
    import { ref } from 'vue';
    export default {
        name: "Movie",
        data(){
            return{
                movie1:{
                },
                movie2:{
                },
                movie3:{
                }
            }
        },
        mounted(){
            this.axios.get("/api/movie/select.do"+"?type="+1).then(res=>{
                if(res.data.code==200){
                    this.movie1=res.data.data;
                }
            });
            this.axios.get("/api/movie/select.do"+"?type="+2).then(res=>{
                if(res.data.code==200){
                    this.movie2=res.data.data;
                }
            });
            this.axios.get("/api/movie/select.do"+"?type="+3).then(res=>{
                if(res.data.code==200){
                    this.movie3=res.data.data;
                }
            });
        },
        setup() {
            const images = [
                {img:"https://tse2-mm.cn.bing.net/th/id/OIP-C.CSn-VWmjfwhR3fnHriLboQHaE7?w=197&h=131&c=7&r=0&o=5&dpr=1.1&pid=1.7"},
                {img:"https://tse4-mm.cn.bing.net/th/id/OIP-C.TED9bVT1yHU5BF6Mf-TWfwHaEs?w=197&h=124&c=7&r=0&o=5&dpr=1.1&pid=1.7"},
                {img:"https://tse1-mm.cn.bing.net/th/id/OIP-C.R5zXc8KaXfeoQ0HHPH3ojwHaE8?w=197&h=131&c=7&r=0&o=5&dpr=1.1&pid=1.7"}
            ];
            return { images };
            const active = ref(0);
            return { active };
            const activeName = ref('a');
            return { activeName };
        },
        methods:{
            tzdetail(id){
                //跳转页面 传递参数 编程式路由 携带参数
                this.$router.push({path:"/moviedetail",query:{id:id}});
            },
            tzback(){
                history.back();
            },
            tzpay(){
                this.$router.push({path:"/moviepay"});
            }
        }
    }
</script>

<style scoped>
    .img1{
        width: 100%;
        height: 8rem;
    }
    .dh{
        height: 3rem;
        background-color:#f03d38 ;
    }
    .head{
        padding-top: 1rem;
        text-align: left;
        font-size: 18px;
        color:white;
    }
    p{
        font-size: 10px;
    }
   van-button{
        width: 10rem;
        height: 1rem;
    }
</style>